<template>
  <div>
    <TypeNav/>
    <!--list-content-->
    <div class="main">
      <div class="py-container">
        <SearchTag
            :props="searchUrl.props"
            :trademarkName="searchUrl.trademark"
            @removeAttr="removeAttr"
            @removeParams="removeParams"
            @removeQuery="removeQuery"
            @removeTrademark="removeTrademark"
        />
        <SearchSelector @attrsUrl="attrsUrl" @trademarkUrl="trademarkUrl"/>
        <SearchDetails :continueNum="3" :pageNo="searchUrl.pageNo" :total="total" :totalPages="totalPages"
                       @sort="sort"
                       @toPageList="toPageList"
        />
        <SearchHot/>
      </div>
    </div>
  </div>
</template>

<script>
import SearchTag from "@/pages/Search/components/SearchTag";
import SearchSelector from "@/pages/Search/components/SearchSelector";
import SearchDetails from "@/pages/Search/components/SearchDetails";
import SearchHot from "@/pages/Search/components/SearchHot";
import {mapActions, mapGetters} from "vuex";

export default {
  name: 'Search',
  components: {SearchTag, SearchSelector, SearchDetails, SearchHot},
  data() {
    return {
      searchUrl: {   // 初始化的默认参数
        category1Id: "",
        category2Id: "",
        category3Id: "",
        categoryName: "",
        keyword: "",
        order: "",
        pageNo: 1,
        pageSize: 100,
        props: [],
        trademark: "",
      }
    }
  },
  mounted() {
    // 第一步 先和并参数 根据跳转过来的路由携带的对应参数 进行 查数据
    this.initSearchUrl()
    // 第二步 根据参数进行 查询对应数据
    this.getCategoryList(this.searchUrl)
  },
  methods: {
    ...mapActions('search', ['getCategoryList']),
    // 因为点击到搜索页 只有两个途径 三级列表跳转和 搜索框跳转
    // 所以他们的搜索的参数 是需要在第一时间就要 合并到默认参数里面的
    // 然后才能进行 请求并返回对应数据
    // 1- 合并搜索参数
    initSearchUrl() {
      const {
        category1Id = '',
        category2Id = '',
        category3Id = '',
        categoryName = '',
      } = this.$route.query;   // 获取三级列表参数
      const {searchKey} = this.$route.params;  // 获取搜索框参数
      // 合并参数
      this.searchUrl = {
        ...this.searchUrl,
        category1Id,
        category2Id,
        category3Id,
        categoryName,
        keyword: searchKey
      }
    },
    // 2- 点击品牌实现搜索对应数据（组件通信：子传父）
    trademarkUrl(tm) {
      // console.log(tm)
      // 收集品牌的查询参数 并合并
      this.searchUrl.trademark = `${tm.tmId}:${tm.tmName}`;
      // 根据参数进行 查询对应数据
      this.getCategoryList(this.searchUrl)
    },
    // 3- 点击属性实现搜索对应数据（组件通信：子传父）
    attrsUrl(attr) {
      // console.log(attr)、
      const {
        attrId,
        attrName,
        attrItem
      } = attr
      // 收集属性的查询参数 并合并
      this.searchUrl.props.push(`${attrId}:${attrItem}:${attrName}`);
      // 根据参数进行 查询对应数据
      this.getCategoryList(this.searchUrl)
    },
    // 4- 删除query导航面板重新搜索
    removeQuery() {
      const params = this.$route.params
      this.$router.push({
        name: 'Search',
        params
      })
    },
    // 5- 删除params导航面板重新搜索
    removeParams() {
      const query = this.$route.query;
      this.$bus.$emit('removeIptValue')
      this.$router.push({
        name: 'Search',
        query
      })
    },
    // 6- 品牌Tag内容面板的删除  重新发送请求
    removeTrademark() {
      this.searchUrl.trademark = '';
      this.getCategoryList(this.searchUrl)
    },
    // 7- 属性的Tag内容面板的删除  重新发送请求
    removeAttr(attrItem) {
      this.searchUrl.props = this.searchUrl.props.filter(item => item != attrItem)
      this.getCategoryList(this.searchUrl)
    },
    // 8- 升序降序的事件回调（数据改变）
    sort(order) {
      this.searchUrl.order = order;
      this.getCategoryList(this.searchUrl)
    },
    // 9- 实现点击页码渲染对应数据
    toPageList(page) {
      this.searchUrl.pageNo = page
      this.getCategoryList(this.searchUrl)
    }
  },
  watch: {
    // 因为已经在search页  再次点击查询不会实现路由跳转 导致 请求发送不出去 所以我们需要对路由进行监听
    // 从而达到路由改变 查询参数改变 数据实现自动 更新
    $route() {
      // 第一步 先和并参数 根据跳转过来的路由携带的对应参数 进行 查数据
      this.initSearchUrl()
      // 第二步 根据参数进行 查询对应数据
      this.getCategoryList(this.searchUrl)
    }
  },
  computed: {
    ...mapGetters('search', ['totalPages', 'total'])
  }
}
</script>

<style lang="less" scoped>
.main {
  margin: 10px 0;

  .py-container {
    width: 1200px;
    margin: 0 auto;


  }
}
</style>